<?php
use yii\helpers\Url;

$web = Url::base();
?>

<script type="application/javascript">
    function edit(obj) {
        var tr = ($(obj).parent().parent());
        var html = $('<td><input type="text" class="form-control small" value="' + tr.find('td').eq(0).html() + '" data-old-value="' + tr.find('td').eq(0).html() + '" autofocus></td>'
            + '<td><input type="text" class="form-control small" value="' + tr.find('td').eq(1).html() + '" data-old-value="' + tr.find('td').eq(1).html() + '"></td>' +
            '<td><input type="text" class="form-control small" value="' + tr.find('td').eq(2).html() + '" data-old-value="' + tr.find('td').eq(2).html() + '"></td>' +
            '<td><input type="text" class="form-control small" value="' + tr.find('td').eq(3).html() + '" data-old-value="' + tr.find('td').eq(3).html() + '"></td>' +
            '<td><a class="btn btn-link" href="javascript:;" onclick="save(this)">保存</a>' +
            '<a class="btn btn-link" href="javascript:;" onclick="cancel(this)">取消</a></td>');
        tr.html(html);
    }

    function cancel(obj) {
        var tr = ($(obj).parent().parent());
        if ($(tr).data('contacter-id') != '0') {
            edit2display(obj);
        } else {
            tr.remove();
        }
    }

    function edit2display(obj, id) {
        if (id) {
            $(obj).parent().parent().data('contacter-id', id);
        }
        $(obj).parent().parent().find('td').eq(0).html($(obj).parent().parent().find('td').eq(0).find('input').data('old-value'));
        $(obj).parent().parent().find('td').eq(1).html($(obj).parent().parent().find('td').eq(1).find('input').data('old-value'));
        $(obj).parent().parent().find('td').eq(2).html($(obj).parent().parent().find('td').eq(2).find('input').data('old-value'));
        $(obj).parent().parent().find('td').eq(3).html($(obj).parent().parent().find('td').eq(3).find('input').data('old-value'));
        $(obj).parent().parent().find('td').eq(4).html('<a class="btn btn-link" href="javascript:;" onclick="edit(this)">编辑</a><a class="btn btn-link" href="javascript:;" onclick="deleteRow(this)">删除</a>');
    }

    function save(obj) {
        var name = $(obj).parent().parent().find('td').eq(0).find('input').val().trim();
        if (name == '') {
            alert('请输入联系人姓名!');
            return;
        }

        var phone = $(obj).parent().parent().find('td').eq(1).find('input').val().trim();
        if (phone == '') {
            alert('请输入联系人手机号!');
            return;
        }

        var email = $(obj).parent().parent().find('td').eq(2).find('input').val().trim();
        var remark = $(obj).parent().parent().find('td').eq(3).find('input').val().trim();
        var data = {};
        data.institutionCode = $("#hiddenInstitutionCode").val();
        data.id = $(obj).parent().parent().data('contacter-id');
        data.name = name;
        data.phone = phone;
        data.email = email;
        data.remark = remark;
        requestJson("add-contacter-handler", data, true, function (re) {
            if (re.status == 0) {
                $(obj).parent().parent().find('td').eq(0).find('input').data('old-value', $(obj).parent().parent().find('td').eq(0).find('input').val());
                $(obj).parent().parent().find('td').eq(1).find('input').data('old-value', $(obj).parent().parent().find('td').eq(1).find('input').val());
                $(obj).parent().parent().find('td').eq(2).find('input').data('old-value', $(obj).parent().parent().find('td').eq(2).find('input').val());
                $(obj).parent().parent().find('td').eq(3).find('input').data('old-value', $(obj).parent().parent().find('td').eq(3).find('input').val());
                edit2display(obj, re.data);
            } else {
                alert('操作失败！');
            }
        });
    }

    function deleteRow(obj) {
        var r = confirm('确定删除此联系人?');
        if (r == true) {
            var data = {};
            data.id = $(obj).parent().parent().data('contacter-id');
            requestJson("del-contacter-handler", data, true, function (re) {
                if (re.status == 0) {
                    $(obj).parent().parent().remove();
                } else {
                    alert('操作失败！');
                }
            });
        }
    }

    function addContacter() {
        var html = $('<tr data-contacter-id="0">' +
            '<td><input type="text" class="form-control small" value="" autofocus></td>' +
            '<td><input type="text" class="form-control small" value=""></td>' +
            '<td><input type="text" class="form-control small" value=""></td>' +
            '<td><input type="text" class="form-control small" value=""></td>' +
            '<td><a class="btn btn-link" href="javascript:;" onclick="save(this)">保存</a>' +
            '<a class="btn btn-link" href="javascript:;" onclick="cancel(this)">取消</a>' +
            '</td>');
        $('#contacter_table').find('tbody').prepend(html);
    }
</script>

<input id="hiddenInstitutionCode" type="hidden" value="<?= $institution_code ?>">

<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-3">
                <button class="btn btn-default " type="button" onclick="addContacter()">
                    <i class="fa fa-plus"></i> 新增联系人
                </button>
            </div>
        </div>
    </div>
</div>

<table class="table table-striped table-hover table-bordered" id="contacter_table">
    <thead>
    <tr>
        <th class="col-lg-2">姓名</th>
        <th class="col-lg-2">手机</th>
        <th class="col-lg-2">邮箱</th>
        <th>备注</th>
        <th class="col-lg-2">操作</th>
    </tr>
    </thead>
    <tbody>
    <?php
    foreach ($contacter_list as $contacter) {
        ?>
        <tr data-contacter-id="<?= $contacter['id'] ?>">
            <td><?= $contacter['name'] ?></td>
            <td><?= $contacter['phone'] ?></td>
            <td><?= $contacter['email'] ?></td>
            <td><?= $contacter['remark'] ?></td>
            <td><a class="btn btn-link" href="javascript:;" onclick="edit(this)">编辑</a>
                <a class="btn btn-link" href="javascript:;" onclick="deleteRow(this)">删除</a></td>
        </tr>
        <?php
    }
    ?>
    </tbody>
</table>

